<template>
  <div>
    <a-drawer class="form1"
              :visible="dialogVisible"
              title="服务费账单明细"
              placement="right"
              :width="1100"
              :closable="true"
              :after-visible-change="afterVisibleChange"
              @close="handleOk()">
      <div class="title">
        <div class="title-div1">
          <img src="../../../../assets/image/sellerHub/yf.png"
               alt="">
          <div>4月</div>
        </div>
        <div class="title-div2">
          <p>对账总金额：<span class="div2-money">¥5000.00</span></p>
          <p>
            账单时间：<span>2021/04/01-04/30</span><i></i>
            对账单号：<span>DZD202105SHAD1</span>
          </p>
        </div>
        <!-- <p class="title-p1">
          <span>服务网点：</span><i class="widths">奥迪世博店-宝山汽修厂</i>
          <span>账单金额：</span> <i>5000<i style="font-size:14px">.00</i></i>
        </p>
        <p class="title-p2">
          <span>账期：</span><i>4月</i>
          <span>账单时间：</span><i>2021/04/01-04/30</i>
          <span>对账单号：</span><i>DZD202105SHAD1</i>
        </p> -->
      </div>
      <div class="kong"></div>
      <div class="content-box">
        <div class="content-search">
          <a-input-search placeholder="搜索订单编号/业务单号/商品名称/商品编码"
                          style="width: 322px"
                          v-model="form.searchName"
                          @search="onSearch"
                          @change="onSearch" />
          <a-button class="export">
            <img src="../../../../assets/image/sellerHub/dc.png"
                 alt=""
                 class="daochu">
            批量导出
          </a-button>
        </div>
        <div class="content-time">
          <span>业务时间：
            <a-range-picker :placeholder="['开始时间','结束时间']"
                            v-model="form1.time"
                            @change="onChangeactualDeliveryStartTime"
                            style="width:240px">
              <a-icon slot="suffixIcon"
                      type="calendar" />
            </a-range-picker>
          </span>
          <div class="tit-button">
            <a-button type="link"
                      style="margin-right:10px"
                      @click="cancel">
              重置
            </a-button>
            <a-button type="danger">
              查询
            </a-button>
          </div>
        </div>
        <div class="content">
          <a-table :columns="columns"
                   :scroll="{ x: 1000 }"
                   :data-source="data"
                   :pagination="false">
            <!-- <template slot="footer"
                      slot-scope="currentPageData">
              <div class="currentPageData1">合计</div>
              <div class="currentPageData2">200</div>
              <div class="currentPageData3">400</div>
            </template> -->
            <span slot="accountType">类型
              <img style="cursor: pointer;margin-left:4px;"
                   src="../../../../assets/image/sellerHub/menu_close.png"
                   alt="">
            </span>
          </a-table>
        </div>
      </div>
      <div class="content-foot">
        <pagination @pageChange="pageChange"
                    :total="total"
                    :current="current"></pagination>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import pagination from '@/components/common/pagination.vue'
const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    key: 'name',
    width: 100,
  },
  {
    title: '订单编号',
    dataIndex: 'name',
    key: 'name',
    width: 200,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '订单时间',
    dataIndex: 'name',
    key: 'name',
    width: 200,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '业务单号',
    dataIndex: 'age',
    width: 200,
    key: 'age',
  },
  {
    title: '业务时间',
    dataIndex: 'address',
    key: 'address 1',
    width: 200,
    ellipsis: true,
  },
  {
    title: '商品编码',
    dataIndex: 'address',
    key: 'address 2',
    width: 100,
    ellipsis: true,
  },
  {
    title: '商品名称',
    dataIndex: 'address',
    key: 'address 3',
    width: 200,
    ellipsis: true,
  },
  {
    title: '数量',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
    width: 80,
  },
  {
    title: '协议金额(元)',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
    width: 100,
  },
  {
    title: '订单金额(元)',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
    width: 100,
  },
  {
    title: '税费补差金额(元)',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
    width: 100,
  },
  {
    title: '附加费金额(元)',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
    width: 100,
  },
  {
    title: '服务费金额(元)',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
    width: 100,
  },
  {
    title: '服务网点',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
    width: 100,
  },
  {
    dataIndex: 'accountType',
    key: 'accountType',
    ellipsis: true,
    width: 100,
    fixed: 'right',
    slots: { title: 'accountType' },
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    accountType: '1',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    accountType: '1',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    accountType: '1',
    tags: ['cool', 'teacher'],
  },
];

export default {
  components: {
    pagination,
  },
  name: 'UserEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      dialogVisible: false,
      code: '',
      columns,
      data,
      total: 1,
      current: 1,
      visible2: false,
      form1: {},
      form: {
        accountPeriod: '',
        startDate: '',
        endDate: '',
        id: '',
        pageNo: 1,
        pageSize: 10,
        searchName: ''
      },

    }
  },
  methods: {
    getList (row) {
      this.form.id = row.id
      this.getList1()
    },
    getList1 () {
      this.$store.dispatch('request', this.$api.sellerCenter.serviceFeeDetailPage(this.form)).then(res => {
        console.log(res);
      })
    },
    afterVisibleChange (val) {

    },
    handleOk () {
      this.$emit('cancel', 123);
    },
    onChangeactualDeliveryStartTime (value, dateString) {
      console.log(value, dateString);
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
      this.getList1()
    },
    pageChange () { },
    onSearch () {
      console.log(123123);
      this.getList1()
    },
    cancel () {
      this.form1.time = undefined
      this.form.startDate = undefined
      this.form.endDate = undefined
    }
  },
  watch: {
    visible (newVal) {
      this.dialogVisible = newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  height: 96px;
  padding: 24px;
  .title-div1 {
    position: relative;
    float: left;
    img {
      width: 48px;
      height: 48px;
    }
    div {
      position: absolute;
      bottom: 6px;
      right: 6px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #3483ff;
    }
  }
  .title-div2 {
    margin-left: 72px;
    p {
      font-size: 12px;
      color: @newColorGreyFont;
      margin-bottom: 4px;
      i {
        margin: 0 16px;
        border: 1px solid #f2f2f2;
      }
      span {
        color: rgba(51, 51, 51, 1);
      }
      .div2-money {
        color: @activeRed;
        font-size: 18px;
      }
    }
  }
}
.kong {
  height: 16px;
  background: #f8f8f8;
}
.content-box {
  padding: 24px;
  .content-search {
    text-align: right;
    /deep/ .ant-input {
      height: 32px;
      line-height: 32px;
      border: 1px solid @newBorder;
      font-size: 12px;
    }
    /deep/ .ant-btn {
      border: 1px solid @newBorder;
    }

    .export {
      width: 96px;
      height: 32px;
      padding: 0;
      font-size: 12px;
      float: right;
      color: @newColorGreyFontM;
      margin-left: 8px;
      .daochu {
        width: 16px;
        height: 16px;
        vertical-align: sub;
        margin-right: 8px;
      }
    }
  }
  .content-time {
    margin: 16px 0;
    height: 64px;
    border-radius: 2px;
    box-shadow: 0px 0px 6px 1px rgba(39, 36, 36, 0.08);
    padding: 16px;
    span {
      font-size: 12px;
      color: @newColorGreyFontM;
      /deep/.ant-input {
        border: 1px solid rgba(39, 36, 36, 0.08);
        font-size: 12px;
      }
    }
    .tit-button {
      float: right;
    }
  }
  .content {
    margin-bottom: 72px;
  }
}
.content-foot {
  position: fixed;
  width: 1328px;
  bottom: 0;
  height: 72px;
  box-shadow: 0px 1px 0px 0px #f4f5f8 inset;
  padding: 24px;
  span {
    color: @newColorGreyFont;
    font-size: 14px;
    img {
      width: 16px;
      height: 16px;
      margin-right: 3px;
      vertical-align: sub;
    }
    i {
      font-style: normal;
      font-size: 18px;
      font-weight: 500;
      color: @newColorGreyFontM;
      font-family: PingFangSC, PingFangSC-Medium;
      margin-right: 50px;
    }
  }
  .pagination-inline {
    float: right;
  }
}

/deep/ .ant-table-thead {
  font-size: 12px;
  background: #f9f9f9;
  color: @newColorGreyFontM;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  > tr > th {
    padding: 14px 16px;
    border-bottom: 1px solid @newBorder;
  }
}
/deep/ .ant-table-tbody {
  color: @newColorGreyFontM;
  font-size: 12px;
  > tr > td {
    padding: 13px 16px;
    border-bottom: 1px solid @newBorder;
  }
}
/deep/ .ant-drawer-body {
  padding: 0;
}
/deep/ .input-placeholder {
  font-size: 12px !important;
}
/deep/ .ant-btn {
  padding: 0 9px;
  font-size: 12px;
}
/deep/ .ant-btn-link {
  color: @newColorGreyFontM;
}
.currentPageData1 {
  width: 720px;
  float: left;
}
.currentPageData2 {
  float: left;
  width: 105px;
  text-align: center;
}
.currentPageData3 {
  float: left;
  width: 105px;
  text-align: center;
}
/deep/ .ant-table-footer {
  overflow: hidden;
  padding: 9px 16px;
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid @newBorder;
}
</style>